---
title: Particles
date: 2024-06-04
description: Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.
author: nyxb
published: true
---

<ComponentPreview name="particles-demo" />


### Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx nyxb@latest add particles
```

</TabsContent>

<TabsContent value="manual">

<Steps>

Copy and paste the following code into your project.

```text
components/ui/particles.tsx
```

<ComponentSource name="particles" />

</Steps>

</TabsContent>

</Tabs>

## Props

| Prop      | Type    | Description                      | Default |
| --------- | ------- | -------------------------------- | ------- |
| className | string  | The class name for the component | -       |
| quantity  | number  | The number of particles          | 100     |
| staticity | number  | The staticity of the particles   | 50      |
| ease      | number  | The ease of the particles        | 50      |
| size      | number  | The size of the particles        | 0.4     |
| refresh   | boolean | Whether to refresh the particles | false   |
| color     | string  | The color of the particles       | #ffffff |
| vx        | number  | The x velocity of the particles  | 0       |
| vy        | number  | The y velocity of the particles  | 0       |
